<template>
  <div class="transposing">
    <my-head title="移位管理" :isRightClick="false" :backHome="true"/>

    <mu-text-field v-model="vin" v-show='isShowVin' placeholder="VIN" ref="vin" class='input' @keyup.enter.native="getVin"><i class="iconfont icon-saomiao" @click="scan('vin')"></i></mu-text-field>

    <mu-text-field v-model="surevin" @keyup.enter.native="isPickCar()" v-show='isShowSurevin' placeholder="VIN" ref="surevin" class='input'><i class="iconfont icon-saomiao" @click="scan('surevin')"></i></mu-text-field>

    <mu-paper class="paper" :z-depth="2" v-show="isShowCardMsg" >
        <div class="list-content"><span class="library-position">{{msg}}</span></div>
    </mu-paper>

    <mu-paper class="paper" :z-depth="2" v-show="isShowCard0" >
        <!-- <i class='mark6'>{{vinAfter}}</i> -->
        <div class="list-content">VIN ：<span>{{vin}}</span></div>
        <div class="list-content">任务类型：{{taskType}}</div>
        <div class="list-content">取车库位：<span class="library-position">{{pickLocation}}</span></div>
    </mu-paper>

    <mu-paper class="paper" :z-depth="2" v-show="isShowCard1" >
        <div class="list-content">VIN ：<span>{{vin}}</span></div>
        <div class="list-content">任务类型：<span>{{taskType}}</span></div>
        <div class="list-content">交通车：<span class="library-position">{{bus}}</span></div>
        <div class="list-content">交通车状态：<span class="library-position">{{busStatus}}</span></div>
        <div class="list-content">上车站点：<span>{{busPosition}}</span></div>
        <div class="list-content">取车库位：<span class="library-position">{{pickLocation}}</span></div>
        <div class="list-content">
          <mu-button color="primary" @click="seeMaps">查看地图</mu-button>
        </div>
    </mu-paper>

    <mu-paper class="paper" :z-depth="2" v-show="isShowCard2" >
        <div class="list-content">VIN ：<span>{{vin}}</span></div>
        <div class="list-content">车型：<span>{{carType}}</span><em></em>颜色：<span>{{color}}</span></div>
        <div class="list-content">任务类型：<span>{{taskType}}</span></div>
        <div class="list-content">补油：<span>{{oil}}</span></div>
        <div class="list-content">取车库位：<span class="library-position">{{pickLocation}}</span></div>
        <div class="list-content">目标库位：<span class="library-position">{{targetLocation}}</span></div>
        <div class="list-content">备注详情：<span :class="isVinSys?'library-position':''">{{remark}}</span></div>
    </mu-paper>

    <div class="btn">
        <mu-button large v-show="refuse" color="primary" @click="openBottomSheet()">拒绝任务</mu-button>
        <mu-button large v-show="receive" color="primary" @click="userActive(1)">领取任务</mu-button>
        <mu-button large v-show="cancel" color="primary" @click="isGetOnCar(0)">取消乘车</mu-button>
        <mu-button large v-show="getOn" color="primary"  @click="isGetOnCar(1)">上车确认</mu-button>
        <mu-button large v-show="abnormal" color="primary" @click="goAbnormal()">异常上报</mu-button>
        <mu-button large v-show="pickCar" color="primary" @click="isPickCar()">取车确认</mu-button>
        <mu-button large v-show="done" color="primary" @click="isTaskDone()">确认完成</mu-button>
    </div>

    <mu-bottom-sheet :open.sync="openRefuseReasons">
        <mu-list @item-click="closeBottomSheet">
            <mu-sub-header>请拒绝原因</mu-sub-header>
            <mu-list-item button v-for="(item,index) in refuseReasons" :key="index" @click="userActive(0, item.reason)">
                <mu-list-item-title>{{item.reason}}</mu-list-item-title>
            </mu-list-item>
        </mu-list>
    </mu-bottom-sheet>
    <mu-dialog title="是否确认完成?" width="600" max-width="80%" :esc-press-close="false" :overlay-close="false" :open.sync="isuredoneDialog">
        <mu-button slot="actions" flat color="primary" @click="sureDone()">是</mu-button>
        <mu-button slot="actions" flat color="primary" @click="closeThisConfirm">否</mu-button>
    </mu-dialog>
    <div class="targetLocation" ref="test" @click="watchTest">
        当前库位坐标
        <div>经：{{longitude}}</div>
        <div>纬：{{latitude}}</div>
        <div>半径：{{railRadius}}</div>
        <div>距离：{{lengths}}</div>
    </div>
    <scanning v-if="isScanning" :mark="scanMark" v-on:childByValue="childByValue" v-on:closeing="closeing"/>
  </div>
</template>

<script>
import myHead from '@/components/header'
import scanning from "@/components/scanning"
import api from "@/common/api"
export default {
  name: 'transposing',
  inject: ["reload"],
  components: {
    myHead, scanning
  },
  data () {
    return {
        scanMark: '',
        isScanning: false,
        iswatchTest: false,
        isuredoneDialog: false,
        surevin: '',
        openRefuseReasons: false,
        refuseReasons: [],
        isShowSurevin: false,
        isShowCardMsg: false,
        msg: '',
        vin: '',
        isShowVin: false,
        isShowCard0: false,
        isShowCard1: false,
        isShowCard2: false,
        color: '',
        oil: '',
        taskType: '',
        pickLocation: '',
        bus: '',
        remark: '',
        busPosition: '',
        targetLocation: '',
        carType: '',
        refuse: false,receive: false,cancel:false,getOn:false,abnormal:false,pickCar:false,done:false,
        latitude: 0,
        longitude: 0,
        dlatitude: 0,
        dlongitude: 0,
        railRadius: 10,
        lengths: 0,
        timeInterval: null,
        isDisCompute: true,
        requestOnce: true,
        busStatus: '',
        isVinSys:false
    }
  },
  methods: {
    closeing (val) {
      val ? this.isScanning = false : null;
    },
    childByValue (val) {
      if(val){
        if(val.split('&')[1] == 'vin'){
          this.vin = val.split('&')[0];
          this.getVin();
        }else if(val.split('&')[1] == 'surevin'){
          this.surevin = val.split('&')[0];
          this.isPickCar();
        }
      }
    },
    scan (txt) {
      this.scanMark = txt;
      this.isScanning = true;
    },
    closeFullscreenDialog(){
      this.openFullscreen = false;
      this.closeScan();
    },
    watchTest(){
      if(this.iswatchTest){
        this.$refs.test.classList.remove('hover')
      }else{
        this.$refs.test.classList.add('hover')
      }
      this.iswatchTest = !this.iswatchTest;
    },
    seeMaps () {
      this.$router.push({name:'maps', params: {
        marks: [{
          latitude: this.dlatitude,
          longitude: this.dlongitude,
          name: "移位交通车",
          phone: "移位交通车"
        }],
        flag: 0
      }});
    },
    closeBottomSheet () {
        this.openRefuseReasons = false;
    },
    openBottomSheet () {
        this.openRefuseReasons = true;
    },
    isPickCar () {
      let data = null;
      if(this.surevin == ''){
        data = Object.assign({},this.$store.state.user,{
            content: {
                vin: this.vin,
                issurevin: false
            }
        });
      }else{
        if(this.vin){
            if(this.surevin == this.vin){
                data = Object.assign({},this.$store.state.user,{
                    content: {
                        vin: this.vin,
                        issurevin: true
                    }
                });
            }else{
                this.Toast({
                    message: "VIN验证错误"
                });
                return false;
            }
        }else{
            data = Object.assign({},this.$store.state.user,{
                content: {
                    vin: this.surevin,
                    issurevin: true
                }
            });
        }
      }
      this.common.reqData(api.app('isPickCarShift'), data, res=>{
          console.log(res.data);
          if(res.data.status == 100){
            this.isShowSurevin = this.isShowVin = this.refuse = this.receive = this.cancel = this.getOn = this.pickCar = false;
            this.abnormal = this.done = this.isShowCard2 = true;
            this.taskQuery(data);
          }else{
            this.Toast({
                duration: 2000,
                mask: true,
                message: res.data.msg
            });
          }
      },err =>{
          console.log(err)
      });
    },
    goAbnormal () {
      this.$router.push({name: "abnormal", params: {vin: this.vin}});
    },
    isGetOnCar (flag) {
      let data = Object.assign({},this.$store.state.user,{
          content: {
              flag: flag
          }
      });
      this.common.reqData(api.app('busUpdate'), data, res=>{
          console.log(res.data);
          if(res.data.status == 100){
            if(flag == 0){
                this.Toast.success({
                    duration: 2000,
                    mask: true,
                    message: '已取消乘车'
                });
            }else{
                this.Toast.success({
                    duration: 1000,
                    mask: true,
                    message: '已上车'
                });
            }
            this.taskQuery(data);
          }else{
              this.Toast({
                duration: 2000,
                mask: true,
                message: res.data.msg
              });
          }
      },err =>{
          console.log(err)
      });
    },
    userActive (flag, reason) {
      let data = Object.assign({},this.$store.state.user,{
          content: {
              vin: this.vin,
              flag: flag
          }
      });
      if(flag == 0){
        data = Object.assign({},this.$store.state.user,{
            content: {
              vin: this.vin,
              flag: flag,
              reason: reason
            }
        });
      }
      this.common.reqData(api.app('outlibraryIsReceive'), data, res=>{
        let datas = res.data;
        if(datas.status == 100){
          if(flag == 0){
            this.Toast.success({
                duration: 1000,
                mask: true,
                message: "已拒绝任务"
            });
            this.isShowCardMsg = true;
            this.msg = "成功拒绝任务，已暂停接单!", this.isShowCard0 = false, this.refuse = false, this.receive = false;
          }else{
            this.Toast.success({
                duration: 1000,
                mask: true,
                message: "已领取任务"
            });
            this.taskQuery(data);
          }
        }else{
          this.Toast.fail({
              duration: 2000,
              mask: true,
              message: datas.msg
          });
        }
      },err =>{
          console.log(err)
          this.Toast.clear();
      });
    },
    isTaskDone () {
      // 确认完成
      if(this.latitude === 0 || this.longitude === 0){
        // 在电子围栏半径外
        this.isuredoneDialog = true;
      }else{
        this.disCompute("MANUAL", ()=>{
            // 在电子围栏半径内
            this.isuredoneDialog = true;
        });
      }
    },
    sureDone(){
      this.taskDone('MANUAL');
      this.isuredoneDialog = false;
    },
    closeThisConfirm(){
      this.isuredoneDialog = false;
    },
    taskDone (manual) {
      if(this.requestOnce){
        this.requestOnce = false;
        this.common.reqData(api.app('transposingClose'), Object.assign({},this.$store.state.user,{
            content: {
                vin: this.vin,
                action: manual
            }
        }), res=>{
            this.requestOnce = true;
            console.log(res);
            if(res.data.status == 100){
                // 提示
                this.Toast({
                  duration: 3000,
                  message: "完成"
                });
                manual == "RAIL" ? this.common.tts("任务已自动完成") : 0;
                this.longitude = this.latitude = 0;
                this.isDisCompute = true;
                // 确认完成 重新查询
                this.abnormal = this.done = false;
                this.taskQuery(this.$store.state.user);
            }else{
                // 提示
                this.Toast({
                    mask: true,
                    message: res.data.msg
                });
            }
        },err =>{
            this.requestOnce = true;
            console.log(err)
            this.Toast.clear();
        });
      }else{
          return false;
      }
    },
    getVin () {
      this.common.reqData(api.app('transposingQueryVin'), Object.assign({},this.$store.state.user,{
          content: {
            vin: this.vin
          }
      }), res=>{
        console.log(res);
        if(res.data.status == 100){
            this.isShowSurevin = this.isShowCard0 = this.isShowCard1 = this.isShowVin = this.refuse = this.receive = this.cancel = this.getOn = this.pickCar = false;
            this.abnormal = this.done = this.isShowCard2 = true;
            // -- 数据
            this.vin = res.data.content.vin;
            this.taskType = res.data.content.taskType;
            this.pickLocation = res.data.content.pickLocation;
            this.oil = res.data.content.oil;
            this.targetLocation = res.data.content.targetLocation
            this.carType = res.data.content.vehicleType;
            this.color = res.data.content.color;
            this.remark = res.data.content.remark ? res.data.content.remark : '';
            this.isVinSys=res.data.content.isVinSys=='是' ? true : false;
            // 获取经纬度
            this.latitude = res.data.content.latitude ? res.data.content.latitude : 0
            this.longitude = res.data.content.longitude ? res.data.content.longitude : 0
            this.dlatitude = res.data.content.dlatitude ? res.data.content.dlatitude : 0
            this.dlongitude = res.data.content.dlongitude ? res.data.content.dlongitude : 0
            this.railRadius = res.data.content.railRadius ? res.data.content.railRadius : 0
            this.isDisCompute = true;
        }else{
            // 提示
            this.Toast({
                duration: 2000,
                mask: true,
                message: res.data.msg
            });
        }
      },err =>{
        console.log(err)
        this.Toast.clear();
      });
    },
    taskQuery (data) {
      this.common.reqData(api.app('transposingQuery'), data, res=>{
        console.log(res);
        // 获取经纬度
        this.latitude = res.data.content.latitude ? res.data.content.latitude : 0
        this.longitude = res.data.content.longitude ? res.data.content.longitude : 0
        this.dlatitude = res.data.content.dlatitude ? res.data.content.dlatitude : 0
        this.dlongitude = res.data.content.dlongitude ? res.data.content.dlongitude : 0
        this.railRadius = res.data.content.railRadius ? res.data.content.railRadius : 0
        this.remark = res.data.content.remark ? res.data.content.remark : '';
        this.isVinSys=res.data.content.isVinSys=='是' ? true : false;
        if(res.data.status == 100){
            if(res.data.content.flag == 0){
                this.isShowSurevin = this.isShowCard1 = this.isShowCard2 = this.isShowVin = this.cancel = this.getOn = this.abnormal = this.pickCar = this.done = false;
                this.receive = this.refuse = this.isShowCard0 = true;
                // -- 数据
                this.vin = res.data.content.vin;
                this.taskType = res.data.content.taskType;
                this.pickLocation = res.data.content.pickLocation;
            }else if(res.data.content.flag == 1){
                this.isShowSurevin = this.isShowCard0 = this.isShowCard2 = this.isShowVin = this.refuse = this.receive = this.abnormal = this.pickCar = this.done = false;
                this.cancel = this.getOn = this.isShowCard1 = true;
                // -- 数据
                this.vin = res.data.content.vin;
                this.taskType = res.data.content.taskType;
                this.pickLocation = res.data.content.pickLocation;
                this.bus = res.data.content.busNo;
                this.busPosition = res.data.content.boradPoint;
                this.busStatus = res.data.content.busStatus;
                if(this.bus == "" || !res.data.content.busNo){
                    this.getOn = false;
                }
            }else if(res.data.content.flag == 2){
                this.isShowCard0 = this.isShowCard1 = this.isShowVin = this.refuse = this.receive = this.cancel = this.getOn = this.done = false;
                this.isShowSurevin = this.abnormal = this.pickCar = this.isShowCard2 = true;
                // -- 数据
                this.vin = res.data.content.vin;
                this.taskType = res.data.content.taskType;
                this.pickLocation = res.data.content.pickLocation;
                this.oil = res.data.content.oil;
                this.targetLocation = res.data.content.targetLocation
                this.carType = res.data.content.vehicleType;
                this.color = res.data.content.color;
                if(res.data.content.vin === ''){
                    this.pickCar = false;
                }
            }else if(res.data.content.flag == 3){
                this.isShowSurevin = this.isShowCard0 = this.isShowCard1 = this.isShowVin = this.refuse = this.receive = this.cancel = this.getOn = this.pickCar = false;
                this.abnormal = this.done = this.isShowCard2 = true;
                // -- 数据
                this.vin = res.data.content.vin;
                this.taskType = res.data.content.taskType;
                this.pickLocation = res.data.content.pickLocation;
                this.oil = res.data.content.oil;
                this.targetLocation = res.data.content.targetLocation
                this.carType = res.data.content.vehicleType;
                this.color = res.data.content.color;
            }else if(res.data.content.flag == 4){
                this.abnormal = this.done = this.isShowCard2 = this.isShowSurevin = this.isShowCard0 = this.isShowCard1 = this.refuse = this.receive = this.cancel = this.getOn = this.pickCar = false;
                this.isShowVin = true;
                this.surevin = this.vin = '';
                setTimeout(() => {
                    this.$refs.vin.$el.children[0].getElementsByTagName('input')[0].focus();
                    window.plus ? plus.key.hideSoftKeybord() : 0;
                }, 50);
            }
        }else{
            console.log(res.data);
        }
      },err =>{
        console.log(err)
        this.Toast.clear();
      });
    },
    disCompute (manual, func) {
      console.log('定位或速度已经改变')
      if(this.isDisCompute){
        this.common.distanceCompute({
            latitude: this.latitude,
            longitude: this.longitude
        },{
            latitude: this.$store.state.latitude,
            longitude: this.$store.state.longitude
        }, this.railRadius, ()=>{
            this.taskDone(manual)
        }, func);
        // 测试用距离计算
        let _this = this;
        let selfPoint = new plus.maps.Point(this.longitude, this.latitude)
        let targetPoint = new plus.maps.Point(this.$store.state.longitude, this.$store.state.latitude)
        plus.maps.Map.calculateDistance(targetPoint, selfPoint, function (event) {
            var distance = event.distance // 转换后的距离值
            _this.lengths = distance
        }, function (e) {
        console.log('Failed:' + JSON.stringify(e))
        })
      }
    },
    mySetInterval () {
      this.timeInterval = setInterval(() => {
        !this.targetLocation && this.taskQuery(this.$store.state.user);
      }, 5000);
    }
  },
  destroyed () {
    clearInterval(this.timeInterval);
  },
  mounted () {
    let data = null;
    if(this.$route.params.vin){
      data = Object.assign({},this.$store.state.user,{
        content:{
          vin: this.$route.params.vin
        }
      });
    }else{
      data = this.$store.state.user;
    }
    this.taskQuery(data);
    // 拒绝原因
    this.refuseReasons = this.$store.state.refuseReasons;
    // 定时器
    this.mySetInterval();
    // setTimeout(() => {
    //     console.log(1);
    //     this.reload();
    // }, 5000);
  },
  computed: {
    latitudeChange () {
        return this.$store.state.latitude;
    },
    longitudeChange () {
        return this.$store.state.longitude;
    },
    speedChange () {
        return this.$store.state.speed;
    }
  },
  watch:{
    latitudeChange: function(data) {
        this.disCompute("RAIL");
    },
    longitudeChange: function(data) {
        this.disCompute("RAIL");
    },
    speedChange: function(data) {
        this.disCompute("RAIL");
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.transposing{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.btn{
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
}
.btn .mu-raised-button{
  font-size: 18px;
  height: 40px;
  line-height: 40px;
}
.input{
    display: block;
    margin: 15px auto;
    width: 85%;
}
.paper, .state, .msg{
    width: 85%;
    margin: 2em auto 0;
    padding: 1.5em 0;
}
.list-content{
    padding: 8px 20px;
}
.library-position{
    font-size: 1.5em;
    font-weight: bold;
    color: red;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
em{
  padding: 0 10px;
}
.mark6{
  font-style: normal;
  color: red;
  font-size: 1.25em;
}
</style>
